import React from 'react';
import logo from './logo.svg';
import './App.css';
import { useRoutes } from 'react-router';
import Basics from './view/Basics';
import RenderStructure from './view/RenderStructure';
import ResponsiveDesign from './view/ResponsiveDesign';
import Geo2D from './view/Geo2D';
import Geo3D from './view/Geo3D';
import LineGeo from './view/LineGeo';
import CustomGeo from './view/CustomGeo';
import WaveBallDemo from './view/WaveBallDemo';
import Universe from './view/Universe';
import TankDemo from './view/TankDemo';

const App: React.FC = () => {
  const routing = useRoutes([
    {
      path: "/",
      element: <Basics />
    }, {
      path: "RenderStructure",
      element: <RenderStructure />
    }, {
      path: "ResponsiveDesign",
      element: <ResponsiveDesign />
    }, {
      path: "Geo2D",
      element: <Geo2D />
    }, {
      path: "Geo3D",
      element: <Geo3D />
    }, {
      path: "LineGeo",
      element: <LineGeo />
    }, {
      path: "CustomGeo",
      element: <CustomGeo />
    }, {
      path: "WaveBallDemo",
      element: <WaveBallDemo />
    }, {
      path: "Universe",
      element: <Universe />
    }, {
      path: "TankDemo",
      element: <TankDemo />
    }
  ]);
  return <>{routing}</>;
};

export default App;
